<template>
  <div>
    <div>
      <el-form label-width="82px" inline>
        <el-form-item label="菜品名称：">
          <el-input
            v-model="name"
            placeholder="请输入菜品名称"
            style="width: 200px"
            clearable
          />
        </el-form-item>
        <el-form-item label="菜品类型：">
          <el-select v-model="type" placeholder="请选择">
            <el-option
              v-for="item in foodTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" plain @click="getFoodList">搜索</el-button>
          <el-button type="info" plain @click="handleReset">重置</el-button>
      <el-button plain type="primary" @click="handleAdd">新增</el-button>

        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="FoodData" style="width: 100%">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="foodTypeId" label="类型">
          <template slot-scope="scope">
            <div v-for="item in foodTypeList" :key="item.name">
              <template v-if="scope.row.foodTypeId === item.id">
                <p>{{ item.name }}</p>
              </template>
              <div v-else>
                <p />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="img" label="图片">
          <template slot-scope="scope">
            <el-image :src="scope.row.img">
              <div slot="error" class="image-slot">
                <p>暂无图片</p>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="priceUnit" label="价格单位" />
        <el-table-column prop="isHot" label="是否招牌">
          <template slot-scope="scope">
            <p v-if="scope.row.isHot === 0">否</p>
            <p v-else>是</p>
          </template>
        </el-table-column>
        <el-table-column prop="isDiscount" label="是否折扣">
          <template slot-scope="scope">
            <p v-if="scope.row.isDiscount === 0">否</p>
            <p v-else>是</p>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip />
        <el-table-column
          label="操作"
          width="250"
          :fixed="isMobile ? false : 'right'"
        >
          <template slot-scope="scope">
            <el-button size="mini" plain @click="handleView(scope.row)"
              >查看</el-button
            >
            <el-button
              size="mini"
              type="primary"
              plain
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              plain
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 20px">
        <el-pagination
          align="center"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { getWbeRoot, getFileRoot } from '../../api/web-site'
import sessionStorage from '../../assets/js/storage'
import { isMobile } from '../../utils/index'
export default {
  data () {
    return {
      FoodData: [
        {
          id: '',
          name: '',
          foodTypeId: '',
          img: '',
          price: '',
          priceUnit: '',
          remark: '',
          isHot: '',
          isDiscount: ''
        }
      ],

      sessionUserId: '',

      /* 分页参数 */
      pageSize: 10,
      currentPage: 1,
      total: 0,

      foodTypeList: [],

      /* 模糊搜索参数 */
      name: '',
      type: ''
    }
  },
  computed: {
    isMobile
  },
  created () {
    this.sessionUserId = sessionStorage.getItem('usrId')
    this.getFoodTypeList()
    this.getFoodList()
  },

  methods: {
    /* 菜品列表 */
    getFoodList () {
      axios
        .get(getWbeRoot() + '/api/food/findAll', {
          params: {
            userId: this.sessionUserId,
            foodTypeId: this.type,
            name: this.name,
            currentPage: this.currentPage,
            pageSize: this.pageSize
          }
        })
        .then(response => {
          if (response.data.code === '200') {
            const data = response.data.data
            for (let i = 0; i < data.length; i++) {
              data[i].img = this.getFoodImg(data[i].img)

              if (data[i].remark.length > 100) {
                data[i].remark = data[i].remark.substring(0, 99) + '...'
              }
            }
            this.FoodData = response.data.data
            this.total = response.data.total
          }
        })
    },

    getFoodTypeList () {
      axios.get(getWbeRoot() + '/api/foodType/findAllList').then(response => {
        if (response.status === 200) {
          this.foodTypeList = response.data
        }
      })
    },

    /**
     * 每页显示数据条数
     * @param val
     */
    handleSizeChange (val) {
      this.pageSize = val
      this.getFoodList()
    },

    /**
     * 跳转页数
     * @param val
     */
    handleCurrentChange (val) {
      this.currentPage = val
      this.getFoodList()
    },

    /**
     * 新增
     */
    handleAdd () {
      sessionStorage.setItem('type', 'add')
      this.$router.push('dishes-manage-details')
    },

    /**
     * 查看详情
     * @param val
     */
    handleView (val) {
      sessionStorage.setItem('id', val.id)
      sessionStorage.setItem('foodTypeId', val.foodTypeId)
      sessionStorage.setItem('type', 'view')
      this.$router.push('dishes-manage-details')
    },

    /**
     * 编辑
     * @param val
     */
    handleEdit (val) {
      sessionStorage.setItem('id', val.id)
      sessionStorage.setItem('foodTypeId', val.foodTypeId)
      sessionStorage.setItem('type', 'edit')
      this.$router.push('dishes-manage-details')
    },

    /**
     * 删除
     * @param val
     */
    handleDelete (val) {
      axios
        .get(getWbeRoot() + '/api/food/delFood', {
          params: {
            foodId: val.id
          }
        })
        .then(response => {
          if (response.data.code === '200') {
            this.$message({
              showClose: true,
              message: response.data.msg,
              type: 'success'
            })
          } else if (response.data.code === '300') {
            this.$message({
              showClose: true,
              message: response.data.msg,
              type: 'warning'
            })
          } else {
            this.$message.error(response.data.msg)
          }
        })
    },

    /**
     * 重置
     */
    handleReset () {
      this.name = ''
      this.type = ''
      this.getFoodList()
    },

    /**
     * @param fileName
     * 获取服务器文件路径
     */
    getFoodImg (fileName) {
      return fileName === '' ? '' : getFileRoot() + '/' + fileName
    }
  }
}
</script>
<style>
.el-tooltip__popper {
  max-width: 300px !important;
}
</style>
